<template>
    <el-container  class='pt60' :class='isMobile == true ? "pb60":"" ' >
        <!-- 左侧导航 -->
        <leftNav  :routers='routers'  class='text-center'  v-if='isMobile != true '></leftNav>
        <!-- 主要内页 -->
        <el-main  >
            <!-- 导航 -->
            <el-row class='pb10  mb10  b-b-1  pt10  pl10  pr10'  >
                <el-col  align='left' :xs='24' :span='12'  class='mb10'>
                  当前位置：<breadName ></breadName>   
                </el-col>
                <el-col  :xs='23'  :span='12'>
                    <el-button type="primary"  size='mini'  class='fr' @click='common_goback()'>返回上一页</el-button>
                </el-col>
            </el-row>  
            <!-- 内页跳转路由 -->
            <keep-alive  :include="cacheRoute"  :max="1"><router-view  v-if='$route.meta.keepAlive'  v-loading = 'loading' element-loading-text="拼命加载中"  /></keep-alive>
            <router-view v-if='!$route.meta.keepAlive' v-loading = 'loading' element-loading-text="拼命加载中"  />
        </el-main>
        <!-- 移动端底部导航显示图标 -->
        <mobileNav  :routers='routers'  class='text-center absolute z99'  :isMobile='isMobile'  v-if='isMobile == true ' ></mobileNav>
    </el-container>
</template>

<script>
  /*interface*/
import  {  ListMessge  }  from  '@/api/homework/index'

//组件引入
import leftNav from '@/components/common/leftNav'
import breadName from "@/components/common/breadName"
import mobileNav from "@/components/common/mobileNav"

/*state*/
import {mapGetters} from 'vuex'

export default {
  name: 'home',
  data(){
    return {
      //需要动态缓存的路由数组，解决keepAlive无法修改缓存页存储的内容。meta.keepAlive的修改会有问题，一直返回的情况下，发现keep-Alive缓存的一直是当meta.keepAlive设置为true的第一次，之后设置false再设置为true，缓存的仍然是第一次true时的页面
        // cacheRoute:[],

    }
  },
  created(){
      /*登陆完成之后ding show header*/
      this.$store.commit("setheadershow",true);
  },
  methods:{
      //返回，取消键
      common_goback(){
          /*让返回页在homew时不再返回*/
          if(this.$route.path != '/homework'){
              this.$router.go(-1)
          }
      }
  },
  computed: {
      /*获得左侧栏数据*/
      routers() {
          let items = [];
          let routers = JSON.parse(sessionStorage.getItem('routers'))

          for (let router of routers) {
              if(router.isMenu == '1'){
                  /*取得所有的路由信息*/
                  let route_code = JSON.parse(router.routerCode)
                  /*一级目录*/
                  if(router.parentId == 0){
                      let item = {
                        id: router.id,
                        parentId:router.parentId,
                        title: router.title,
                        icon:router.icon,
                        url: route_code.path
                      }
                      items.push(item)
                  }
              }
          }
          treeNext(items)
          function treeNext(arr){
              arr.forEach((item)=>{
                let child= []
                routers.forEach((it)=>{
                  if(it.isMenu == '1'){
                    if(item.id == it.parentId){
                        let route_code = JSON.parse(it.routerCode)
                        child.push({
                          id:it.id,
                          parentId:it.parentId,
                          title:it.title,
                          icon:it.icon,
                          url: route_code.path
                        })
                    }
                  }
                })
                if(child.length!=0){
                  item.children=child
                }
              })
          }
          return items
      },
      ...mapGetters([
          'loading','isMobile','cacheRoute'
      ])
    
  },
  mounted(){
      let that = this
      //未登录时，header已显示，登录之后请求消息数并将这个数字 动态更新到header组件
      this.$nextTick(() => {
          if(this.$store.state.username!=''){
              let mesnum ;
              ListMessge({pageNo:1,pageSize:10}).then(res=>{
                  if(res.data.flag == true){
                      mesnum = res.data.notViewCount
                      that.$store.commit("setmessageNum",mesnum);
                  }
              })
          } 
      })
  },
  components:{
    leftNav,
    breadName,
    mobileNav
  },
  
}
</script>

<style >
.el-container{height:100%;background-color:#fff;}

.el-aside { color: #333;text-align: center;line-height: 200px;}
/*overflow-x解决左右抖动问题  text-align解决ie浏览器下文字居中*/
 .el-main {text-align: left; overflow-x: hidden; /*overflow: overlay;*/-webkit-overflow-scrolling : touch;height: 100%;}/*height:100%; 兼容ie9*/
/*解决非google浏览器下 溢出元素padding-b失效问题*/
.el-main:after{content:"";height:96px;display: block;}

</style>	